﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
    ViewData["Title"] = "生产废料单管理";
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>生产废料单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-header">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <h2>生产废料单管理</h2>
                </div>
                <div class="layui-col-md6" style="text-align: right;">
                    <button class="layui-btn" id="btnAdd">
                        <i class="layui-icon">&#xe654;</i> 新增废料单
                    </button>
                    <button class="layui-btn layui-btn-danger" id="btnBatchDel">
                        <i class="layui-icon">&#xe640;</i> 批量删除
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <!-- 搜索栏 -->
            <form class="layui-form layui-form-pane" lay-filter="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">废料单名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="wasteOrderName" id="wasteOrderName" placeholder="请输入废料单名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" id="searchBtn">
                            <i class="layui-icon">&#xe615;</i> 搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
            <!-- 数据表格 -->
            <table id="productionWasteOrderTable" lay-filter="productionWasteOrderTable"></table>
        </div>
    </div>

    <!-- 表格操作列模板 -->
    <script type="text/html" id="tableBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script>
        layui.use(['table', 'form', 'layer', 'laydate'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;
            var $ = layui.$;
            
            // 初始化表格
            table.render({
                elem: '#productionWasteOrderTable',
                url: '/ProductionWasteOrder/ShowProductionWasteOrder',
                page: true,
                request: {
                    pageName: 'pageIndex',
                    limitName: 'pageSize'
                },
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'id', title: 'ID', width: 80, sort: true },
                    { field: 'wasteOrderCode', title: '废料单编号', width: 150 },
                    { field: 'wasteOrderName', title: '废料单名称', width: 150 },
                    { field: 'productionWorkOrder', title: '生产工单编码', width: 180 },
                    { field: 'wasteDate', title: '废料日期', width: 180, templet: d => d.wasteDate ? layui.util.toDateString(d.wasteDate, 'yyyy-MM-dd HH:mm:ss') : '' },
                    { field: 'orderStatus', title: '单据状态', width: 120 },
                    { field: 'warehouseName', title: '仓库名称', width: 120 },
                    { title: '操作', toolbar: '#tableBar', width: 150, fixed: 'right' }
                ]]
            });
            
            // 搜索按钮点击事件
            $('#searchBtn').on('click', function(){
                table.reload('productionWasteOrderTable', {
                    where: {
                        wasteOrderName: $('#wasteOrderName').val()
                    },
                    page: {
                        curr: 1
                    }
                });
                return false;
            });
            
            // 新增按钮点击事件
            $('#btnAdd').on('click', function(){
                window.location.href = '/ProductionWasteOrder/EditProductionWasteOrderView';
            });
            
            // 批量删除按钮点击事件
            $('#btnBatchDel').on('click', function(){
                var checkStatus = table.checkStatus('productionWasteOrderTable');
                if(checkStatus.data.length === 0){
                    layer.msg('请选择要删除的记录');
                    return;
                }
                var ids = checkStatus.data.map(function(item){ return item.id; });
                layer.confirm('确定要删除选中的记录吗？', function(index){
                    deleteItems(ids);
                    layer.close(index);
                });
            });
            
            // 表格工具条事件
            table.on('tool(productionWasteOrderTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    window.location.href = '/ProductionWasteOrder/EditProductionWasteOrderView?id=' + data.id;
                } else if(obj.event === 'del') {
                    layer.confirm('确定要删除这条记录吗？', function(index){
                        deleteItems([data.id]);
                        layer.close(index);
                    });
                }
            });

            // 删除函数
            function deleteItems(ids) {
                $.ajax({
                    url: '/ProductionWasteOrder/DelProductionWasteOrder',
                    type: 'DELETE',
                    contentType: 'application/json',
                    data: JSON.stringify(ids),
                    success: function (res) {
                        layer.msg('删除成功');
                        table.reload('productionWasteOrderTable');
                    },
                    error: function () {
                        layer.msg('删除失败');
                    }
                });
            }
        });
    </script>
</body>
</html>
